<%--
  Created by IntelliJ IDEA.
  User: LYK
  Date: 2017/4/18
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>Title</title>
	<jsp:include page="/static/commonviews/header.jsp"/>
	<link type="text/css" href="srui.css" rel="stylesheet"/>
</head>
<body>
<div class="container bs-docs-container">
	<div class="row">
		<!--左侧-->
		<div class="col-md-9" role="main">

			<!--layer标题-->
			<div class="doc-section" id="title">
				<h2 id="overview" class="page-header ">layer</h2>
				<p style="font-size: 14px">layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。</p>

				<p style="font-size: 14px">在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被4015883人次关注）。layer 甚至兼容了包括IE6在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。</p>

				<p style="font-size: 14px">layer采用MIT开源协议，将会永久性提供无偿服务。因着数年的坚持维护，截至到2016年11月07日，已运用在超过20万家Web平台，其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案，并且她仍在与Layui一并高速发展。</p>
			</div>

			<!--开发准备-->
			<div class="doc-section" id="prepare">
				<h3 class="page-header ">开发准备</h3>
				<p>
                    <span>
                        header元素内引入
                    </span>
					<code>
						&lt;link rel="stylesheet" type="text/css" href="layer.css" /&gt;
					</code>
				</p>
				<p>
                    <span>
                        和
                    </span>
					<code>
						&lt;script type="text/javascript" src="layer.js"/&gt;
					</code>
				</p>
			</div>

			<!--信息框-->
			<div class="doc-section">
				<h3 class="page-header">
					信息框
				</h3>

				<div class="bs-example" >
					<div class="bs-example-title">弹出图标 文字 按钮</div>
					<button class="btn btn-primary" onclick="clickTestOne()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.alert('见到你真的很高兴', {icon: 6})
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">背景透明</div>
					<button class="btn btn-primary" onclick="clickTestTwo()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('你确定你很帅么？', {<br>
						&nbsp;&nbsp;time: 0, //不自动关闭<br>
						&nbsp;&nbsp;btn: ['必须啊', '丑到爆'],<br>
						&nbsp;&nbsp;yes: function(index){<br>
						&nbsp;&nbsp;&nbsp;&nbsp;layer.close(index);<br>
						&nbsp;&nbsp;&nbsp;&nbsp;layer.msg('谢谢 O.o', {<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon: 6,<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;btn: ['嗷','嗷','嗷']<br>
						&nbsp;&nbsp;&nbsp;&nbsp;});<br>
						&nbsp;&nbsp;}<br>
						});<br>
					</code>
				</div>
				<!--提示框无button-->
				<div class="bs-example">
					<div class="bs-example-title">提示框无button</div>
					<button class="btn btn-primary" onclick="clickTestThree()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('这是最常用的吧');
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">不透明无button有icon</div>
					<button class="btn btn-primary" onclick="clickTestFour()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('不开心。。', {icon: 5});
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">提示框抖动</div>
					<button class="btn btn-primary" onclick="clickTestFive()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('玩命卖萌中', function(){
						//关闭后的操作
						});
					</code>
				</div>
			</div>


			<!--页面层-->
			<div class="doc-section">
				<h3 class="page-header">
					页面层
				</h3>

				<div class="bs-example">
					<div class="bs-example-title">页面层-自定义</div>
					<button class="btn btn-primary" onclick="clickTestSix()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.open({<br>
						&nbsp;&nbsp;type: 1,<br>
						&nbsp;&nbsp;title: false,<br>
						&nbsp;&nbsp;closeBtn: 0,<br>
						&nbsp;&nbsp;shadeClose: true,<br>
						&nbsp;&nbsp;skin: 'mineClass',//自己在css样式表中定义个样式<br>
						&nbsp;&nbsp;content: '自定义HTML内容'<br>
						});<br>
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">页面层-弹出iframe</div>
					<button class="btn btn-primary" onclick="clickTestSeven()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.open({<br>
						&nbsp;&nbsp;type: 2,<br>
						&nbsp;&nbsp;area: ['700px', '530px'],<br>
						&nbsp;&nbsp;fixed: false, //不固定<br>
						&nbsp;&nbsp;maxmin: true,<br>
						&nbsp;&nbsp;content: 'testIFrame.html'//文件路径<br>
						});<br>
					</code>
				</div>



			</div>


			<!--加载层-->
			<div class="doc-section">
				<h3 class="page-header">
					加载层
				</h3>

				<!--默认-->
				<div class="bs-example">
					<div class="bs-example-title">加载层-默认</div>
					<button class="btn btn-primary" onclick="clickTestEight()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.load();<br>
						//设置关闭时间<br>
						setTimeout(function(){<br>
						&nbsp;&nbsp;layer.closeAll('loading');<br>
						}, 1500);<br>
					</code>
				</div>

				<!--样式二-->
				<div class="bs-example">
					<div class="bs-example-title">加载层-样式二</div>
					<button class="btn btn-primary" onclick="clickTestNine()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.load(1);<br>
						//设置关闭时间<br>
						setTimeout(function(){<br>
						&nbsp;&nbsp;layer.closeAll('loading');<br>
						}, 1500);<br>
					</code>
				</div>

				<!--样式三-->
				<div class="bs-example">
					<div class="bs-example-title">加载层-样式三</div>
					<button class="btn btn-primary" onclick="clickTestTen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.load(2);<br>
						//设置关闭时间<br>
						setTimeout(function(){<br>
						&nbsp;&nbsp;layer.closeAll('loading');<br>
						}, 1500);<br>
					</code>
				</div>

				<!--样式四-->
				<div class="bs-example">
					<div class="bs-example-title">加载层-样式四</div>
					<button class="btn btn-primary" onclick="clickTestEleven()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('加载中', {<br>
						&nbsp;&nbsp;icon: 16<br>
						&nbsp;&nbsp;,shade: 0.01<br>
						});<br>
					</code>
				</div>
			</div>

			<!--tips层-->
			<div class="doc-section">
				<h3 class="page-header">
					tips层
				</h3>

				<div class="bs-example">
					<div class="bs-example-title">tips层-上边</div>
					<button class="btn btn-primary" id="tips-up" onclick="clickTestTwelve()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.tips('上', '#id或者.class', {<br>
						&nbsp;&nbsp;tips: [1, '#0FA6D8'] //还可配置颜色<br>
						});<br>
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">tips层-右边</div>
					<button class="btn btn-primary" id="tips-right" onclick="clickTestThirteen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.tips('右', '#id或者.class', {<br>
						&nbsp;&nbsp;tips: [2, '#0FA6D8'] //还可配置颜色<br>
						});<br>
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">tips层-下边</div>
					<button class="btn btn-primary" id="tips-down" onclick="clickTestFourteen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.tips('下', '#id或者.class', {<br>
						&nbsp;&nbsp;tips: [3, '#0FA6D8'] //还可配置颜色<br>
						});<br>
					</code>
				</div>

				<div class="bs-example">
					<div class="bs-example-title">tips层-左边</div>
					<button class="btn btn-primary" id="tips-left" onclick="clickTestFifteen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.tips('左', '#id或者.class', {<br>
						&nbsp;&nbsp;tips: [4, '#0FA6D8'] //还可配置颜色<br>
						});<br>
					</code>
				</div>
			</div>

			<!--其他演示-->
			<div class="doc-section">
				<h3 class="page-header">
					其他演示
				</h3>

				<!--默认prompt-->
				<div class="bs-example">
					<div class="bs-example-title">默认prompt</div>
					<button class="btn btn-primary" onclick="clickTestSixteen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.prompt(function(val, index){<br>
						&nbsp;&nbsp;&nbsp;layer.msg('得到了'+val);<br>
						&nbsp;&nbsp;&nbsp;layer.close(index);<br>
						});<br>
					</code>
				</div>

				<!--弹窗即全屏-->
				<div class="bs-example">
					<div class="bs-example-title">弹窗即全屏</div>
					<button class="btn btn-primary" onclick="clickTestSeventeen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						var index = layer.open({<br>
						&nbsp;&nbsp;&nbsp;type: 2,<br>
						&nbsp;&nbsp;&nbsp;content: 'testIFrame.html',<br>
						&nbsp;&nbsp;&nbsp;area: ['320px', '195px'],<br>
						&nbsp;&nbsp;&nbsp;maxmin: true<br>
						});<br>
						layer.full(index);<br>
					</code>
				</div>

				<!--正上方-->
				<div class="bs-example">
					<div class="bs-example-title">正上方</div>
					<button class="btn btn-primary" onclick="clickTestEighteen()">测试按钮</button>
				</div>
				<div class="code-example">
					<code>
						layer.msg('灵活运用offset', {<br>
						&nbsp;&nbsp;&nbsp;offset: 't',<br>
						&nbsp;&nbsp;&nbsp;anim: 6<br>
						});<br>
					</code>
				</div>

			</div>

			<div class="doc-section">
				<h3 class="page-header">
					属性
				</h3>
				<table class="table table-bordered doc-table">
					<thead>
					<tr>
						<th>属性名</th>
						<th>类型</th>
						<th>备注</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<th>type-基本层类型</th>
						<th>Number<br>默认：0</th>
						<th>layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）</th>
					</tr>
					<tr>
						<th>title-标题</th>
						<th>类型：String/Array/Boolean<br>默认：'信息'</th>
						<th>title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false</th>
					</tr>
					<tr>
						<th>content - 内容</th>
						<th>类型：String/DOM/Array<br>默认：''</th>
						<th>content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同</th>
					</tr>
					<tr>
						<th>skin - 样式类名</th>
						<th>类型：String<br>默认：''</th>
						<th>skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。</th>
					</tr>
					<tr>
						<th>area - 宽高</th>
						<th>类型：String/Array，默认：'auto'</th>
						<th>在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']</th>
					</tr>
					<tr>
						<th>offset - 坐标</th>
						<th>类型：String/Array，默认：垂直水平居中</th>
						<th>
							offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：<br>
							<br>
							<table class="table table-bordered">
								<tr>
									<th>offset: '100px'</th>
									<th>只定义top坐标，水平保持居中</th>
								</tr>
								<tr>
									<th>offset: ['100px', '50px']</th>
									<th>同时定义top、left坐标</th>
								</tr>
								<tr>
									<th>offset: 't'</th>
									<th>快捷设置顶部坐标</th>
								</tr>
								<tr>
									<th>offset: 'r'</th>
									<th>快捷设置右边缘坐标</th>
								</tr>
								<tr>
									<th>offset: 'b'</th>
									<th>快捷设置底部坐标</th>
								</tr>
								<tr>
									<th>offset: 'l'</th>
									<th>快捷设置左边缘坐标</th>
								</tr>
								<tr>
									<th>offset: 'lt'</th>
									<th>快捷设置左上角</th>
								</tr>
								<tr>
									<th>offset: 'lb'</th>
									<th>快捷设置左下角</th>
								</tr>
								<tr>
									<th>offset: 'rt'</th>
									<th>快捷设置右上角</th>
								</tr>
								<tr>
									<th>offset: 'rb'</th>
									<th>快捷设置右下角</th>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<th>icon - 图标 信息框和加载层的私有参数</th>
						<th>类型：Number<br>默认：-1（信息框）/0（加载层）</th>
						<th>
							信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2,如<br>
							layer.alert('酷毙了', {icon: 1});<br>
							layer.msg('不开心。。', {icon: 5});<br>
							layer.load(1); //风格1的加载<br>
						</th>
					</tr>
					<tr>
						<th>btn - 按钮</th>
						<th>
							类型：String/Array<br>
							默认：'确认'
						</th>
						<th>
							信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。例如:<br>
							<code>
								layer.open({<br>
								&nbsp;&nbsp;&nbsp;content: 'test'<br>
								&nbsp;&nbsp;&nbsp;,btn: ['按钮一', '按钮二', '按钮三']<br>
								&nbsp;&nbsp;&nbsp;,yes: function(index, layero){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//按钮【按钮一】的回调<br>
								&nbsp;}<br>
								,btn2: function(index, layero){<br>
								&nbsp;&nbsp;&nbsp;//按钮【按钮二】的回调<br>
								&nbsp;&nbsp;&nbsp;//return false 开启该代码可禁止点击该按钮关闭<br>
								&nbsp;}<br>
								,btn3: function(index, layero){<br>
								&nbsp;&nbsp;&nbsp;//按钮【按钮三】的回调<br>
								&nbsp;&nbsp;&nbsp;//return false 开启该代码可禁止点击该按钮关闭<br>
								&nbsp;}<br>
								,cancel: function(){<br>
								&nbsp;&nbsp;&nbsp;//右上角关闭回调<br>
								&nbsp;&nbsp;&nbsp;//return false 开启该代码可禁止点击该按钮关闭<br>
								&nbsp;}<br>
								});<br>
							</code>
						</th>
					</tr>
					<tr>
						<th>btnAlign - 按钮排列</th>
						<th>
							类型：String<br>
							默认：r
						</th>
						<th>
							你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：<br>
							<table class="table table-bordered">
								<thead>
								<tr>
									<th>值</th>
									<th>备注</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<th>btnAlign: 'l'</th>
									<th>按钮左对齐</th>
								</tr>
								<tr>
									<th>btnAlign: 'c'</th>
									<th>按钮居中对齐</th>
								</tr>
								<tr>
									<th>btnAlign: 'r'</th>
									<th>按钮右对齐。默认值，不用设置</th>
								</tr>
								</tbody>
							</table>
						</th>
					</tr>
					<tr>
						<th>closeBtn - 关闭按钮</th>
						<th>
							类型：String/Boolean<br>
							默认：1
						</th>
						<th>
							layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
						</th>
					</tr>
					<tr>
						<th>shade - 遮罩</th>
						<th>类型：String/Array/Boolean<br>默认：0.3</th>
						<th>即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0</th>
					</tr>
					<tr>
						<th>shadeClose - 是否点击遮罩关闭</th>
						<th>
							类型：Boolean<br>
							默认：false
						</th>
						<th>如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。</th>
					</tr>
					<tr>
						<th>time - 自动关闭所需毫秒</th>
						<th>类型：Number<br>默认：0</th>
						<th>默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）</th>
					</tr>
					<tr>
						<th>id - 用于控制弹层唯一标识</th>
						<th>类型：String<br>默认：空字符</th>
						<th>设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式</th>
					</tr>
					<tr>
						<th>anim - 弹出动画</th>
						<th>类型：Number<br>默认：0</th>
						<th>ie8不支持，目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数</th>
					</tr>
					<tr>
						<th>isOutAnim - 关闭动画 （layer 3.0.3新增）</th>
						<th>类型：Boolean<br>默认：true</th>
						<th>默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可</th>
					</tr>
					<tr>
						<th>maxmin - 最大最小化。</th>
						<th>类型：Boolean<br>默认：false</th>
						<th>该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可</th>
					</tr>
					<tr>
						<th>fixed - 固定</th>
						<th>类型：Boolean<br>默认：true</th>
						<th>即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可</th>
					</tr>
					<tr>
						<th>resize - 是否允许拉伸</th>
						<th>类型：Boolean，默认：true</th>
						<th>默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效</th>
					</tr>
					<tr>
						<th>resizing - 监听窗口拉伸动作</th>
						<th>类型：Function<br>默认：null</th>
						<th>
							当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象<br>
							<code>
								&nbsp;&nbsp;resizing: function(layero){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(layero);<br>
								&nbsp;&nbsp;}<br>
							</code>
						</th>
					</tr>
					<tr>
						<th>scrollbar - 是否允许浏览器滚动条滚动</th>
						<th>类型：Boolean<br>默认：true</th>
						<th>默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽</th>
					</tr>
					<tr>
						<th>maxWidth - 最大宽度</th>
						<th>类型：number<br>默认：360</th>
						<th>请注意：只有当area: 'auto'时，maxWidth的设定才有效。</th>
					</tr>
					<tr>
						<th>zIndex - 层叠顺序</th>
						<th>类型：，默认：19891014</th>
						<th>一般用于解决和其它组件的层叠冲突。</th>
					</tr>
					<tr>
						<th>move - 触发拖动的元素</th>
						<th>类型：String/DOM/Boolean<br>默认：'.layui-layer-title'</th>
						<th>默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽</th>
					</tr>
					<tr>
						<th>moveOut - 是否允许拖拽到窗口外</th>
						<th>类型：Boolean<br>默认：false</th>
						<th>默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可</th>
					</tr>
					<tr>
						<th>moveEnd - 拖动完毕后的回调方法</th>
						<th>类型：Function<br>默认：null</th>
						<th>默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象</th>
					</tr>
					<tr>
						<th>tips - tips方向和颜色</th>
						<th>类型：Number/Array<br>默认：2</th>
						<th>tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']</th>
					</tr>
					<tr>
						<th>tipsMore - 是否允许多个tips</th>
						<th>类型：Boolean<br>默认：false</th>
						<th>允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启</th>
					</tr>
					<tr>
						<th>success - 层弹出后的成功回调方法</th>
						<th>类型：Function<br>默认：null</th>
						<th>
							当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。<br>
							<code>
								layer.open({<br>
								&nbsp;&nbsp;content: '测试回调',<br>
								&nbsp;&nbsp;success: function(layero, index){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;console.log(layero, index);<br>
								&nbsp;&nbsp;}<br>
								});
							</code>
						</th>
					</tr>
					<tr>
						<th>yes - 确定按钮回调方法</th>
						<th>类型：Function<br>默认：null</th>
						<th>
							该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：
							<code>
								layer.open({<br>
								&nbsp;&nbsp;content: '测试回调',<br>
								&nbsp;&nbsp;yes: function(index, layero){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;//do something<br>
								&nbsp;&nbsp;&nbsp;&nbsp;layer.close(index); //如果设定了yes回调，需进行手工关闭<br>
								&nbsp;&nbsp;&nbsp;&nbsp;}<br>
								});<br>
							</code>
						</th>
					</tr>
					<tr>
						<th>cancel - 右上角关闭按钮触发的回调</th>
						<th>类型：Function<br>默认：null</th>
						<th>
							该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可，如；<br>
							<code>
								cancel: function(index, layero){<br>
								&nbsp;&nbsp;if(confirm('确定要关闭么')){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;layer.close(index)<br>
								&nbsp;&nbsp;}<br>
								&nbsp;&nbsp;return false;<br>
								}<br>
							</code>
						</th>
					</tr>
					<tr>
						<th>end - 层销毁后触发的回调</th>
						<th>类型：Function<br>默认：null</th>
						<th>无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。</th>
					</tr>
					<tr>
						<th>full/min/restore -分别代表最大化、最小化、还原 后触发的回调</th>
						<th>类型：Function<br>默认：null</th>
						<th>携带一个参数，即当前层DOM</th>
					</tr>

					</tbody>
				</table>
			</div>

			<div class="doc-section">
				<h2 class="page-header">
					内置方法
				</h2>

				<div class="doc-section">
					<div class="bs-example">
						<div class="bs-example-title">layer.config(options) - 初始化全局配置</div>
						<div>
							这是一个可以重要也可以不重要的方法，重要的是，它的权利真的很大，尤其是在模块化加载layer时，你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。而说它不重要，是因为多数情况下，你会发现，你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。
						</div>
					</div>
					<div class="code-example">
						如果您是采用seajs或者requirejs加载layer，你需要执行该方法来完成初始化的配置。比如：<br>
						<br>
						<code>
							layer.config({<br>
							&nbsp;&nbsp;&nbsp;&nbsp;path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录<br>
							});<br>
							//这样的话，layer就会去加载一些它所需要的配件，比如css等。<br>
							//当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径<br>
						</code>
						<br>
						如果你是采用<code>&lt;script src="?a.js&layer.js"/&gt;</code>这种合并的方式引入layer，那么您需要在script标签上加一个自定义属性merge="true"。如：<br>
						<br>
						<code>
							&lt;script src="?a.js&layer.js" merge="true"/&gt;<br>
							//这样的话，layer就不会去自动去获取路径，但你需要通过以下方式来完成初始化的配置<br>
							layer.config({<br>
							&nbsp;&nbsp;&nbsp;&nbsp;path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录<br>
							});<br>
						</code>
						<br>
						但layer.config的作用远不止上述这样。它还可以配置层默认的基础参数，如：<br>
						<br>
						<code>
							layer.config({<br>
							&nbsp;&nbsp;&nbsp;anim: 1, //默认动画风格<br>
							&nbsp;&nbsp;&nbsp;skin: 'layui-layer-molv' //默认皮肤<br>
							&nbsp;&nbsp;&nbsp;…<br>
							});<br>
							//除此之外，extend还允许你加载拓展的css皮肤，如：<br>
							layer.config({<br>
							&nbsp;&nbsp;&nbsp;//如果是独立版的layer，则将myskin存放在./skin目录下<br>
							&nbsp;&nbsp;&nbsp;//如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下<br>
							&nbsp;&nbsp;&nbsp;extend: 'myskin/style.css'<br>
							});<br>
						</code>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3" role="complementary">
			<nav class="docs-sidebar hidden-print hidden-xs hidden-sm affix">
				<li>
					<a href="#title">layer</a>
				</li>
				<li>
					<a href="#prepare">开发准备</a>
				</li>
				<li>
					<a href="#prepare">信息框</a>
					<ul>
						<li><a>弹出图标 文字 按钮</a></li>
						<li><a>背景透明</a></li>
						<li><a>提示框无button</a></li>
						<li><a>不透明无button有icon</a></li>
						<li><a>提示框抖动</a></li>
					</ul>
				</li>
				<li>
					<a href="">页面层</a>
					<ul>
						<li><a>页面层-自定义</a></li>
						<li><a>页面层-弹出iframe</a></li>
					</ul>
				</li>
				<li>
					<a href="">加载层</a>
					<ul>
						<li><a>加载层-默认</a></li>
						<li><a>加载层-样式二</a></li>
						<li><a>加载层-样式三</a></li>
						<li><a>加载层-样式四</a></li>
					</ul>
				</li>
				<li>
					<a href="">tips层</a>
					<ul>
						<li><a>tips层-上边</a></li>
						<li><a>tips层-右边</a></li>
						<li><a>tips层-下边</a></li>
						<li><a>tips层-左边</a></li>
					</ul>
				</li>
				<li>
					<a href="">其他demo</a>
					<ul>
						<li><a>默认prompt</a></li>
						<li><a>弹窗即全屏</a></li>
						<li><a>正上方</a></li>
					</ul>
				</li>
				<li>
					<a href="">属性</a>
				</li>
				<li>
					<a href="">方法</a>
				</li>
			</nav>

		</div>
	</div>
</div>

<jsp:include page="/static/commonviews/footer.jsp"/>
<script type="text/javascript" src="layerDemo.js"></script>
</body>
</html>
